package com.maodou.core.ui.theme

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp

/**
 * 主题使用指南
 * 
 * 本文件详细说明了如何在项目中使用主题系统，包括：
 * 1. 基本主题使用方法
 * 2. 自适应尺寸系统的使用
 * 3. 替代传统 dimens.xml 的方案
 * 4. 最佳实践和注意事项
 */

// ==================== 1. 基本主题使用 ====================

/**
 * 示例 1: 最简单的主题使用方式
 * 
 * 在你的 Composable 函数外层包裹 AppTheme，即可获得完整的主题支持
 */
@Composable
fun SimpleThemeUsage() {
    // 使用默认主题配置
    AppTheme {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .background(MaterialTheme.colorScheme.background)
                .padding(AppThemeProvider.spacing.medium) // 使用主题提供的间距
        ) {
            Text(
                text = "欢迎使用主题系统",
                style = MaterialTheme.typography.headlineMedium, // Material3 字体样式
                color = MaterialTheme.colorScheme.onBackground   // Material3 颜色
            )
            
            Card(
                modifier = Modifier.fillMaxWidth(),
                shape = RoundedCornerShape(AppThemeProvider.shapes.medium), // 主题圆角
                colors = CardDefaults.cardColors(
                    containerColor = MaterialTheme.colorScheme.surface
                )
            ) {
                Text(
                    text = "这是一个卡片",
                    modifier = Modifier.padding(AppThemeProvider.spacing.medium),
                    style = MaterialTheme.typography.bodyMedium
                )
            }
        }
    }
}

/**
 * 示例 2: 使用特定主题配置
 * 
 * 你可以传入自定义的主题配置，或使用预设主题
 */
@Composable
fun CustomThemeUsage() {
    // 使用绿色主题预设
    AppTheme(config = ThemePresets.Green) {
        // 你的UI内容
        YourContent()
    }
    
    // 或者使用自定义配置
    val customConfig = ThemeConfig(
        themeType = ThemeType.PURPLE,
        darkModeType = DarkModeType.DARK,
        fontSizeType = FontSizeType.RELAXED
    )
    
    AppTheme(config = customConfig) {
        // 你的UI内容
        YourContent()
    }
}

// ==================== 2. 自适应尺寸系统 ====================

/**
 * 示例 3: 使用自适应尺寸替代 dimens.xml
 * 
 * 在 Compose 中，我们不再需要创建多个 dimens.xml 文件
 * 而是使用自适应尺寸系统，它会根据屏幕大小自动调整
 */
@Composable
fun AdaptiveSizeUsage() {
    AppTheme {
        // 获取自适应尺寸
        val adaptiveDimensions = AdaptiveDimensions.current()
        val configuration = LocalConfiguration.current
        val screenWidth = configuration.screenWidthDp.dp
        
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(
                    // 根据屏幕大小自动调整内边距
                    horizontal = adaptiveDimensions.medium,
                    vertical = adaptiveDimensions.small
                )
        ) {
            Text(
                text = "自适应尺寸示例",
                style = MaterialTheme.typography.headlineMedium,
                modifier = Modifier.padding(bottom = adaptiveDimensions.small)
            )
            
            Text(
                text = "当前屏幕宽度: ${screenWidth}",
                style = MaterialTheme.typography.bodyMedium,
                color = MaterialTheme.colorScheme.onSurfaceVariant
            )
            
            Spacer(modifier = Modifier.height(adaptiveDimensions.medium))
            
            // 自适应按钮高度
            Button(
                onClick = { },
                modifier = Modifier
                    .fillMaxWidth()
                    .height(AdaptiveSizes.buttonHeight.getSize(screenWidth)),
                shape = RoundedCornerShape(adaptiveDimensions.small)
            ) {
                Text("自适应按钮")
            }
            
            Spacer(modifier = Modifier.height(adaptiveDimensions.medium))
            
            // 自适应卡片
            Card(
                modifier = Modifier.fillMaxWidth(),
                shape = RoundedCornerShape(adaptiveDimensions.medium)
            ) {
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(adaptiveDimensions.medium),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    // 自适应图标大小
                    Box(
                        modifier = Modifier
                            .size(AdaptiveSizes.iconSize.getSize(screenWidth))
                            .background(
                                MaterialTheme.colorScheme.primary,
                                RoundedCornerShape(adaptiveDimensions.small)
                            )
                    )
                    
                    Spacer(modifier = Modifier.width(adaptiveDimensions.medium))
                    
                    Column {
                        Text(
                            text = "自适应列表项",
                            style = MaterialTheme.typography.titleMedium
                        )
                        Text(
                            text = "尺寸会根据屏幕大小自动调整",
                            style = MaterialTheme.typography.bodySmall,
                            color = MaterialTheme.colorScheme.onSurfaceVariant
                        )
                    }
                }
            }
        }
    }
}

// ==================== 3. 主题提供者的使用 ====================

/**
 * 示例 4: 使用 AppThemeProvider 访问主题属性
 * 
 * AppThemeProvider 提供了便捷的方式来访问当前主题的各种属性
 */
@Composable
fun ThemeProviderUsage() {
    AppTheme {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .background(AppThemeProvider.colorScheme.background)
                .padding(AppThemeProvider.spacing.medium)
        ) {
            // 使用主题间距
            Text(
                text = "主题提供者示例",
                style = AppThemeProvider.typography.headlineMedium,
                color = AppThemeProvider.colorScheme.onBackground,
                modifier = Modifier.padding(bottom = AppThemeProvider.spacing.large)
            )
            
            // 检查设备类型
            if (AppThemeProvider.isTablet) {
                Text(
                    text = "当前设备: 平板电脑",
                    style = AppThemeProvider.typography.bodyMedium,
                    color = AppThemeProvider.colorScheme.primary
                )
            } else {
                Text(
                    text = "当前设备: 手机",
                    style = AppThemeProvider.typography.bodyMedium,
                    color = AppThemeProvider.colorScheme.primary
                )
            }
            
            Spacer(modifier = Modifier.height(AppThemeProvider.spacing.medium))
            
            // 检查屏幕方向
            Text(
                text = if (AppThemeProvider.isLandscape) "横屏模式" else "竖屏模式",
                style = AppThemeProvider.typography.bodyMedium,
                color = AppThemeProvider.colorScheme.secondary
            )
            
            Spacer(modifier = Modifier.height(AppThemeProvider.spacing.medium))
            
            // 检查深色模式
            Text(
                text = if (AppThemeProvider.isDark) "深色主题" else "浅色主题",
                style = AppThemeProvider.typography.bodyMedium,
                color = AppThemeProvider.colorScheme.tertiary
            )
        }
    }
}

// ==================== 4. 动态主题切换 ====================

/**
 * 示例 5: 动态切换主题
 * 
 * 展示如何在运行时动态切换主题配置
 */
@Composable
fun DynamicThemeSwitching() {
    val themeManager = remember { ThemeManager.getInstance() }
    val currentConfig by themeManager.themeConfig.collectAsState()
    
    AppTheme {
        LazyColumn(
            modifier = Modifier
                .fillMaxSize()
                .background(MaterialTheme.colorScheme.background)
                .padding(AppThemeProvider.spacing.medium),
            verticalArrangement = Arrangement.spacedBy(AppThemeProvider.spacing.medium)
        ) {
            item {
                Text(
                    text = "动态主题切换",
                    style = MaterialTheme.typography.headlineMedium,
                    color = MaterialTheme.colorScheme.onBackground
                )
            }
            
            item {
                Card {
                    Column(
                        modifier = Modifier.padding(AppThemeProvider.spacing.medium)
                    ) {
                        Text(
                            text = "主题类型",
                            style = MaterialTheme.typography.titleMedium,
                            fontWeight = FontWeight.Bold
                        )
                        
                        Row(
                            modifier = Modifier.fillMaxWidth(),
                            horizontalArrangement = Arrangement.spacedBy(AppThemeProvider.spacing.small)
                        ) {
                            Button(
                                onClick = { themeManager.updateThemeType(ThemeType.DEFAULT) },
                                modifier = Modifier.weight(1f)
                            ) {
                                Text("默认")
                            }
                            
                            Button(
                                onClick = { themeManager.updateThemeType(ThemeType.GREEN) },
                                modifier = Modifier.weight(1f)
                            ) {
                                Text("绿色")
                            }
                            
                            Button(
                                onClick = { themeManager.updateThemeType(ThemeType.PURPLE) },
                                modifier = Modifier.weight(1f)
                            ) {
                                Text("紫色")
                            }
                        }
                    }
                }
            }
            
            item {
                Card {
                    Column(
                        modifier = Modifier.padding(AppThemeProvider.spacing.medium)
                    ) {
                        Text(
                            text = "深色模式",
                            style = MaterialTheme.typography.titleMedium,
                            fontWeight = FontWeight.Bold
                        )
                        
                        Row(
                            modifier = Modifier.fillMaxWidth(),
                            horizontalArrangement = Arrangement.spacedBy(AppThemeProvider.spacing.small)
                        ) {
                            Button(
                                onClick = { themeManager.updateDarkModeType(DarkModeType.LIGHT) },
                                modifier = Modifier.weight(1f)
                            ) {
                                Text("浅色")
                            }
                            
                            Button(
                                onClick = { themeManager.updateDarkModeType(DarkModeType.DARK) },
                                modifier = Modifier.weight(1f)
                            ) {
                                Text("深色")
                            }
                            
                            Button(
                                onClick = { themeManager.updateDarkModeType(DarkModeType.SYSTEM) },
                                modifier = Modifier.weight(1f)
                            ) {
                                Text("跟随系统")
                            }
                        }
                    }
                }
            }
            
            item {
                Card {
                    Column(
                        modifier = Modifier.padding(AppThemeProvider.spacing.medium)
                    ) {
                        Text(
                            text = "字体大小",
                            style = MaterialTheme.typography.titleMedium,
                            fontWeight = FontWeight.Bold
                        )
                        
                        Row(
                            modifier = Modifier.fillMaxWidth(),
                            horizontalArrangement = Arrangement.spacedBy(AppThemeProvider.spacing.small)
                        ) {
                            Button(
                                onClick = { themeManager.updateFontSizeType(FontSizeType.COMPACT) },
                                modifier = Modifier.weight(1f)
                            ) {
                                Text("紧凑")
                            }
                            
                            Button(
                                onClick = { themeManager.updateFontSizeType(FontSizeType.DEFAULT) },
                                modifier = Modifier.weight(1f)
                            ) {
                                Text("默认")
                            }
                            
                            Button(
                                onClick = { themeManager.updateFontSizeType(FontSizeType.RELAXED) },
                                modifier = Modifier.weight(1f)
                            ) {
                                Text("宽松")
                            }
                        }
                    }
                }
            }
        }
    }
}

// ==================== 5. 最佳实践 ====================

/**
 * 最佳实践指南:
 * 
 * 1. 始终使用 AppTheme 包裹你的 UI 内容
 * 2. 使用 AppThemeProvider 访问主题属性，而不是直接使用 MaterialTheme
 * 3. 使用自适应尺寸系统替代固定的 dp 值
 * 4. 利用 AdaptiveDimensions.current() 获取当前屏幕适配的尺寸
 * 5. 使用预设主题 (ThemePresets) 快速应用常用配置
 * 6. 在需要动态切换主题时，使用 ThemeManager
 * 
 * 与传统 dimens.xml 的对比:
 * 
 * 传统方式:
 * - 需要创建多个 dimens.xml 文件 (values, values-sw600dp, values-sw720dp 等)
 * - 静态配置，无法动态调整
 * - 维护成本高，容易遗漏某些尺寸配置
 * 
 * Compose 方式:
 * - 使用代码定义尺寸，支持动态计算
 * - 自适应系统根据屏幕大小自动选择合适的尺寸
 * - 更灵活，可以根据业务需求自定义适配逻辑
 * - 类型安全，编译时检查
 */

@Composable
private fun YourContent() {
    // 示例内容
    Text("这里是你的UI内容")
}